<template>
    <div class="message-main-box" v-loading="loading">
      <div class="message-box" v-for="(item,index) in info" :key="index">
        <img :src="item.user.header_image" @click="$router.push('/homePage?id=' + item.user.id)" alt="" class="message-box-img">
        <span class="message-box-author" @click="$router.push('/homePage?id=' + item.user.id)">{{item.user.nickname}}
          <span class="iconfont icon-nan" v-if="item.user.sex==='男'"></span>
          <span class="iconfont icon-nv" v-if="item.user.sex==='女'"></span>
        </span>
        <span class="message-box-time">{{item.add_time}}</span>


        <span class="message-box-content">
          <span>{{item.action}}了你</span><span v-if="item.action!=='关注' && item.action!=='取消关注'"><span>的</span><span class="message-box-content-article" @click="$router.push('/article?id=' + item.article.id)">《{{item.article.title}}》</span></span>
        </span>
      </div>

      <NoData v-if="count===0" :tip="tip" />

      <el-pagination
        class="message-pages"
        background
        layout="prev, pager, next"
        :total="count"
        v-if="count"
        @current-change="changePage"
        :page-size="10">
      </el-pagination>
    </div>
</template>

<script>
import {getMessage} from "../../api/operation";
import {mapMutations} from 'vuex'
import NoData from '../../components/noData'

export default {
  name: "index",
  data(){
    return{
      info:{},
      count:0,
      tip:'你目前还没有收到任何消息哦',
      loading:false,
    }
  },
  components:{
    NoData
  },
  created(){
    this.loading=true;
    this.getMessageList();
  },
  methods:{
    ...mapMutations('user', [
      'SET_message_num'
    ]),
    getMessageList(){
      getMessage('?ordering=-add_time').then(res=>{
        console.log(res.data);
        this.SET_message_num(0);
        this.info=res.data.results;
        this.count=res.data.count;
        this.loading=false;
      }).catch(error=>{
        console.log(error.data);
        this.loading=false;
      })
    },
    changePage(now){
      this.loading=true;
      getMessage('?page=' + now + '&ordering=-add_time').then(res=>{
        this.info=res.data.results;
        this.loading=false;
      }).catch(error=>{
        this.loading=false;
      })
    },
  }



}
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .message-main-box{
    width 100%
    max-width 600px!important
    margin 0 auto
  }
  .message-box{
    position relative
    padding 15px 8px
    border-bottom 1px solid $color-divider
  }
  .message-box-img{
    width 48px
    height 48px
    cursor pointer
    border-radius 24px
    border 1px solid $color-border
  }
  .message-box-author{
    font-size 15px
    position absolute
    cursor pointer
    left 65px
    top 18px
    color $color-title
  }
  .message-box-time{
    font-size 13px
    position absolute
    right 8px
    top 20px
    color $color-gray
  }
  .message-box-content{
    font-size 12px
    color $color-gray
    overflow hidden
    display block
    position absolute
    left 65px
    top 46px
    white-space nowrap
    width 80%
    text-overflow ellipsis
  }
  .message-box-content-article{
    color $color-blue
    cursor pointer
  }
  .message-pages{
    float right
    margin-top 20px
    margin-bottom 30px
  }
  .icon-nan{
    color $color-blue
    font-size 14px
  }
  .icon-nv{
    color $color-pink
    font-size 14px
  }
</style>
